<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <span>本月: 社保在缴 公积金在缴</span>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button
            v-allow="'import'"
            type="warning"
            size="small"
            @click="router.push('/excel')"
          >
            导入excel
          </el-button>
          <el-button
            v-allow="'export'"
            type="danger"
            size="small"
            @click="exportExcel"
          >
            导出excel
          </el-button>
          <el-button
            v-allow="'add'"
            type="primary"
            size="small"
            @click="hAdd"
          >
            新增员工
          </el-button>
        </template>
      </page-tools>
      <el-card style="margin-top: 10px;">
        <el-table
          border
          :data="tableList"
          :default-sort="{ prop: 'workNumber', order: 'descending' }"
        >
          <el-table-column
            label="序号"
            type="index"
            width="60"
          />
          <el-table-column
            label="姓名"
            prop="username"
          />
          <el-table-column
            label="工号"
            prop="workNumber"
            sortable
          />
          <el-table-column
            label="聘用形式"
          >
            <template #default="{row}">
              {{ hireType[row.formOfEmployment] }}
            </template>
          </el-table-column>
          <el-table-column
            label="部门"
            prop="departmentName"
          />
          <el-table-column
            label="入职时间"
            prop="timeOfEntry"
            sortable
          />
          <el-table-column
            label="操作"
            width="280"
          >
            <template #default="{row}">
              <el-button
                size="small"
                @click="router.push(`/detail?id=${row.id}`)"
              >
                查看
              </el-button>
              <el-button
                size="small"
            
                @click="onDeatil(row.id)"
              >
                分配角色
              </el-button>
              <el-button
                size="small"
                @click="loadDelEmployee(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <!-- 分页组件 -->
          <el-pagination
            v-model:currentPage="pageParams.page"
            v-model:page-size="pageParams.size"
            :page-sizes="[2, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
      <el-dialog
        v-model="showDialog"
        @close="emDialogRef.hCancel()"
      >
        <EmDialog
          ref="emDialogRef"
          @close="showDialog=false"
          @success="hSuccess"
        ></EmDialog>
      </el-dialog>
      <el-dialog
        v-model="showAssignRoleDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="assignRole.resestCheck()"
      >
        <AssignRole
          :id="curId"
          ref="assignRole"
          @close="showAssignRoleDialog=false"
          @success="onSuccess"
        ></AssignRole>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getEmployeeList ,delEmployee } from '@/api/employees'
import { hireType } from '@/constant/enum/employees'
import router from '@/router'
import EmDialog from './emDialog.vue'
import { ENTOCH } from '@/utils/ENTOCH'
import  AssignRole  from './assignRole.vue'
//分配权限
const assignRole=ref()
const showAssignRoleDialog=ref(false)
const curId=ref('')
const onDeatil=(id:string) => {
  showAssignRoleDialog.value=true
  curId.value=id
  nextTick(() => {
    assignRole.value.loadProfileById()
  })
}
const onSuccess=() => {
  showAssignRoleDialog.value=false
}
//导出excel 
const exportExcel= async() => {
  const res = await getEmployeeList(pageParams)
  console.log('res.data.rows',res.data.rows)
  const excelData=ENTOCH(res.data.rows)
  import('@/vendor/Export2Excel.js').then(excel => {
  // excel表示导入的模块对象
    console.log(excel)
    excel.export_json_to_excel({
      // header: ['姓名', '工资'], // 表头 必填
      // data: [
      //   ['刘备', 100],
      //   ['关羽', 500],
      // ], // 具体数据 必填
      ...excelData,
      filename: 'excel-list', // 文件名称
      autoWidth: true, // 宽度是否自适应
      bookType: 'xlsx', // 生成的文件类型
    })
  })
}

//初始化调用
const pageParams = reactive({
  page: 1,
  size: 2,
})
const tableList =ref<EmployeeList[]>()
const total=ref(0)
const loadEmployeeList = async () => {
  try {
    const res = await getEmployeeList(pageParams)
    console.log('getEmployeeList', res)
    tableList.value=res.data.rows
    total.value=res.data.total
  } catch (error) {
    console.log(error)
  }
}
loadEmployeeList()
//分页控制
const handleSizeChange = (val: number) => {
  console.log(`${ val } items per page`)
  pageParams.size=val
  loadEmployeeList()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${ val }`)
  pageParams.page=val
  loadEmployeeList()
}
//删除员工
const loadDelEmployee =async(id:string) => {
  try {
    await ElMessageBox.confirm('你确定删除吗?')
    const res = await delEmployee(id)
    console.log('delEmployee',res)
    if(tableList.value?.length===1) pageParams.page--
    if(pageParams.page<=0) pageParams.page=1
    loadEmployeeList()
  } catch (error) {
    console.log(error)
  }
}
//控制弹层
const showDialog=ref(false)
//新增员工
const hAdd=() => {
  showDialog.value=true
}
//成功的回调
const emDialogRef=ref()
const hSuccess=() => {
  showDialog.value=false
  total.value++
  pageParams.page=Math.ceil(total.value/pageParams.size)
  loadEmployeeList()
  emDialogRef.value.hCancel()

}
</script>